---
category: DOM
created: '2020-09-01'
title: clientY vs pageY
---

Given a point in the page, `clientY` and `pageY` are the distances in pixels from the point to the top of viewport and page.

Here, _page_ is the whole rendered page which may have the scrollbars, whereas _viewport_ is the visible part of the page.

```shell
┌─────────────────────────────┬─┐◀︎─── Web page      ▲
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                   |
|                             | |                 pageY
|                             | |                   |
├=============================┼─┤       ▲           |           ▲
|                             | |       |           |           |
|                             | |       |           |           |
|       Scroll bar ──────────▶︎| |       |           |        clientY
|                             | |     Browser       |           |
|                             | |     window        |           |
|       ● Point               | |       |           ▼           ▼
|                             | |       |
|                             | |       |
├=============================┼─┤       ▼
|                             | |
|                             | |
|                             | |
└─────────────────────────────┴─┘
```

## See also

-   [clientHeight vs offsetHeight vs scrollHeight](https://phuoc.ng/collection/this-vs-that/client-height-vs-offset-height-vs-scroll-height/)
